<template>
  <div class="slideTier">
    <el-carousel  :height="slideHeight()" :pause-on-hover="false">
      <el-carousel-item v-for="(item,index) in slideShowDate" :key="index">
        <div class="description">
          <div class="childDes">
            <div class="maxFont">{{item.msg}}</div>
            <div class="minFont">{{item.minMsg}}</div>
            <div><el-button type="danger" @click="clickBuy(item.comUrl)" round>立即抢购</el-button></div>
          </div>
        </div>
        <img :src="item.imgUrl" class="slideImg"/>
      </el-carousel-item>
    </el-carousel >
  </div>
</template>

<script>
  export default {
    name: "SlideShow",
    data() {
      return {
        slideShowDate: [
          {
            imgUrl: "https://dsfs.oppo.com/archives/202105/2021050603055960939f2faea68.jpg?_w_=2880&amp;_h_=1200",
            //imgUrl: require("../../../assets/img/slideImg/slide1.webp"),
            msg: "OPPO Reno6",
            minMsg:"购机抽300元礼包 | 晒单至高返3000积分 | 积分至高抵200元",
            comUrl: "www.baidu.com"
          },
          {
            imgUrl: "https://dsfs.oppo.com/archives/202107/2021070911072560e7c1e127c0a.jpg?_w_=2880&amp;_h_=1200",
            //imgUrl: require("../../../assets/img/slideImg/slide2.webp"),
            msg: "一加 9R 至高直降300元",
            minMsg:"120Hz柔性直屏 | 65W超级闪充",
            comUrl: "www.baidu.com"
          },
          {
            imgUrl: "https://dsfs.oppo.com/archives/202107/2021071711073260f2f978976a3.jpg?_w_=2880&amp;_h_=1200",
            //imgUrl: require("../../../assets/img/slideImg/slide3.webp"),
            msg: "OPPO K9",
            minMsg:"65W闪充 | 90Hz OLED屏 | 6400万超清三摄",
            comUrl: "www.baidu.com"
          },
          {
            imgUrl: "https://dsfs.oppo.com/archives/202105/2021052010050860a5cc082627c.jpg?_w_=5120&amp;_h_=1780",
            //imgUrl: require("../../../assets/img/slideImg/slide4.webp"),
            msg: "真我GT 大师探索版",
            minMsg:"120Hz 三AMOLED 曲面屏 | 高通骁龙870 5G处理器",
            comUrl: "www.baidu.com"
          }
        ]
      }
    },
    methods: {
      //设置走马灯高度
      slideHeight(){
        return 720+"px";
      },
      //点击立即抢购按钮
      clickBuy(url){
        this.$router.push(url);
      }
    }
  }
</script>
<style scoped>
  /*图层上文字*/
  .description{
    width: 40%;
    height: 100%;
    color: white;
    position: absolute;
    z-index: 1;
    display: flex;
    flex-direction: column;
    margin-left: 50%;
    margin-top: 10%;
  }
  .childDes{
    /*background-color: red;*/
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .maxFont{
    font-size: 45px;
    margin-bottom: 3%;
  }
  .minFont{
    font-size: 23px;
    margin-bottom: 2%;
  }

  .slideImg{
    background-repeat: no-repeat;
    background-size: auto 100%;
    height: 100%;
    transform: translate(0px,0px) scale(1.25,1.15);

  }
  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    height: 680px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>
